<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style lang="">
        body {
            background: black;
        }
        
        .yuan {
            margin: 0 auto;
            border: 2px solid black;
            width: 600px;
            height: 600px;
            border-radius: 300px;
            background: url(1.jpeg);
        }
        
        .kuang {
            /*border: 1px solid pink;*/
            width: 500px;
            height: 180px;
            margin-top: 20px;
            margin-left: 50px;
            font-size: 101px;
            line-height: 200px;
            text-align: center;
            color: lightcyan;
            margin-top: 300px;
        }
        
        .date {
            font-size: 30px;
            margin-left: 160px;
            color: lightcyan;
        }
    </style>
</head>

<body>
    <div class="yuan">

        <div class="kuang" id="shijian">

        </div>
        <div class="date" id="xingqi"></div>
    </div>
    <script>
        function shizhong() {
            var now = new Date();
            console.log(now)
            var year = now.getFullYear();
            var month = now.getMonth();
            var day = now.getDay()
            var xingqi = now.getDay();
            switch (xingqi) {
                case 1:
                    {
                        xingqi = "一"
                        break;
                    }
                case 2:
                    {
                        xingqi = "二"
                        break;
                    }
                case 3:
                    {
                        xingqi = "三"
                        break;
                    }
                case 4:
                    {
                        xingqi = "四"
                        break;
                    }

                case 5:
                    {
                        xingqi = "五"
                        break;
                    }
                case 6:
                    {
                        xingqi = "六"
                        break;
                    }
                case 7:
                    {
                        xingqi = "七"
                        break;
                    }
            }

            document.getElementById("xingqi").innerHTML = year + "年" + month + "月" + day + "日" + "星期" + xingqi;

            var hour = now.getHours()
            hour = hour >= 10 ? hour : "0" + hour;
            console.log(hour)
            var minter = now.getMinutes();
            minter = minter >= 10 ? minter : "0" + minter;
            console.log(minter)
            var second = now.getSeconds();
            second = second >= 10 ? second : "0" + second;
            console.log(second)

            document.getElementById("shijian").innerHTML = hour + ":" + minter + ":" + second
        }

        setInterval(shizhong, 1000);
    </script>
</body>

</html>